*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
li{
    list-style-type: none;
}
.ul>li{
    float: left;
    border: 1px solid red;
    height: 30px;
}
.ul1>li{
    height: 0;
    overflow: hidden;
    background-color: blue;
    transition: 0.5s;
    color: whitesmoke;
}
.ul>li:hover>.ul1>li{
    height: 30px;
    
}